<template>
  <div>
    <div v-if="form.ShowSelectNum==1" style="margin-bottom: 30px">
    <h2><b>查询条件</b></h2>
    <el-row>
      <el-col :span="10">
        <span>仓库名称</span>
      </el-col>
      <el-col :span="3">
        <span>状态</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item>
          <el-input v-model="form.warehouseName" />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item style="width: 500px;">
          <el-select v-model="form.warehouseIsDel" placeholder="请选择状态" >
            <el-option label="有效" :value=1 />
            <el-option label="无效" :value=2 />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-button style="margin-left: 860px;" @click="ClearSelectData">重置</el-button>
    <el-button style="width: 130px;background-color: #556ee6;color: white;" @click="GetSelectData">查询</el-button>
  </div>

  <el-row>
    <el-col :span="3">
      <span><b>仓库类表</b></span>
    </el-col>
    <el-col  :span="3">
      <el-button style="margin-left: 850px;background-color: #34c38f;color: white;font-size: 15px;border-radius:4px ;border-color: #34c38f ;height: 35px;width: 100px;" ><img src="../Warehouse/img/image copy.png" alt="button img" style="width: 18px;height: 15px;" @click="InsertWarehouse">新增仓库</el-button>
    </el-col>
    <el-col  :span="3">
      <el-button style="margin-left: 810px;background-color: white;color: slategray;font-size: 15px;border-radius: 4px;border-color:slategray ;height: 35px;width: 100px;" @click="UpShowSelectNum" v-if="form.ShowSelectNum==0"><img src="../Warehouse/img/image copy 2.png" alt="button img" style="width: 18px;height: 15px;">展开查询</el-button>
      <el-button style="margin-left: 810px;background-color: white;color: #f1b44c;font-size: 15px;border-radius: 4px;border-color:#f1b44c ;height: 35px;width: 100px;" @click="UpShowSelectNum" v-if="form.ShowSelectNum==1"><img src="../Warehouse/img/image copy 2.png" alt="button img" style="width: 18px;height: 15px;" >结束查询</el-button>
    </el-col>
  </el-row>
  <div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="warehouseId" label="序号" width="60" />
    <el-table-column prop="warehousNumBer" label="仓库编码" width="130" />
    <el-table-column prop="warehouseName" label="仓库名称" width="130" />
    <el-table-column prop="warehouseAddr" label="仓库地址" width="130" />
    <el-table-column prop="warehouseRemark" label="备注" width="150" />
    <el-table-column label="创建时间" width="150" >
      <template v-slot="scope">
        {{moment(scope.row.handleTime).format("YYYY年MM月DD日")}}
      </template>
    </el-table-column>
    <el-table-column prop="handle" label="创建人" width="80" />
    <el-table-column label="状态" width="80">
      <template v-slot="scope">
        <el-tag v-if="scope.row.warehouseState==false" type="primary" effect="plain">有效</el-tag>
        <el-tag v-if="scope.row.warehouseState==true" type="danger" effect="plain">无效</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="390" >
      <el-button style="background-color: #f0f0f0;font-size: 17px;border-radius: 4px;border-color:#f0f0f0 ;height: 35px;width: 120px;margin-left: 10px;"><img src="../Warehouse/img/image copy 3.png" alt="">库存初始化</el-button>
        <el-button style="background-color: #ffffff;font-size: 17px;border-radius: 4px;border-color:#ffffff ;height: 35px;width: 80px;"><img src="../Warehouse/img/image copy 4.png" alt="">编辑</el-button>
        <el-button style="background-color: #ffffff;font-size: 17px;border-radius: 4px;border-color:#ffffff ;height: 35px;width: 80px;"><img src="../Warehouse/img/image copy 5.png" alt="">删除</el-button>
        <el-button style="background-color: #50a5f1;color: white;font-size: 17px;border-radius: 4px;border-color:#50a5f1 ;height: 40px;width: 120px;"><img src="../Warehouse/img/image copy 6.png" alt="">库存明细</el-button>
        <el-button style="background-color: #4a81d4;color: white;font-size: 17px;border-radius: 4px;border-color:#50a5f1 ;height: 40px;width: 120px;"><img src="../Warehouse/img/image copy 11.png" alt="">库存汇总</el-button>
        <el-button style="background-color: #34c38f;color: white;font-size: 17px;border-radius: 4px;border-color:#34c38f ;height: 40px;width: 120px;"><img src="../Warehouse/img/image copy 8.png" alt="">库存盘点</el-button>
        <el-button style="background-color: #50a5f1;color: white;font-size: 17px;border-radius: 4px;border-color:#50a5f1 ;height: 40px;width: 120px;"><img src="../Warehouse/img/image copy 9.png" alt="">货位明细</el-button>
        <el-button style="background-color: #4a81d4;color: white;font-size: 17px;border-radius: 4px;border-color:#50a5f1 ;height: 40px;width: 120px;"><img src="../Warehouse/img/image copy 10.png" alt="">货位汇总</el-button>
    </el-table-column>
  </el-table>
  </div>
  <div>
    <el-pagination
    v-model:current-page="form.ynum"
    v-model:page-size="form.qnum"
    layout="prev, pager, next"
    :total="form.count"
    class="mt-4"
    @current-change="handleCurrentChange"
    style="margin-left: 1150px;"
  />
  </div>
  </div>
</template>
  
<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue';
const apiUri=import.meta.env.VITE_APP_API_URL_WAREHOUSE;
import axios from 'axios';
import moment from 'moment'
import {useRouter } from 'vue-router';
const router=useRouter();

const form=reactive({
  warehouseName:'',
  warehouseIsDel:'',
  ShowSelectNum:0,
  ynum:1,
  qnum:5,
  count:0,
  znum:0
})

onMounted(()=>{
  GetTableData();
})

//显示仓库表数据
const tableData=ref([]);
const GetTableData=()=>{
  axios.post(apiUri+"/api/Warehouse/SelWarehouseData",{
    warehouseName:form.warehouseName,
    warehouseIsDel:form.warehouseIsDel||0,
    ynum:form.ynum,
    qnum:form.qnum
  }).then(res=>{
    if(res.data.code>0)
    {
      tableData.value=res.data.data.data;
      form.count=res.data.data.count;
      form.znum=res.data.data.znum;
      console.log(res.data.data.data);
    }
  })
}

//跳转仓库添加页面
const InsertWarehouse=()=>{
  console.log('123');
  router.push('/AddWarehouse');
}

//展开搜索行
const UpShowSelectNum=()=>{
  console.log('0');
  if(form.ShowSelectNum==1)
  {
    console.log('0');
    form.ShowSelectNum=0;
  }
  else if(form.ShowSelectNum==0)
  {
    console.log('1');
    form.ShowSelectNum=1;
  }
}

//重置查询条件
const ClearSelectData=()=>{
  form.warehouseIsDel='';
  form.warehouseName='';
}

//查询
const GetSelectData=()=>{
  GetTableData();
}


//页数
const handleCurrentChange=(val:number)=>{
  form.ynum=val;
  console.log(val);
  GetTableData();
}


</script>